Ext.onReady(function()
    {
        var columnrender = function(val, meta, rec, ri, ci, s) {
            if (val=='1'){
                return 'Masculino';
            }else if (val=='2'){
                return 'Femenino';
            }
        }
        // HANDLE AJAX
        var h_obtener_success = function(obj){

            var grid = X.get('editConfigGrid');
            grid.stopEditing();
           
            for ( var i=0; i<obj.rows.length; i++){
                var defaultData = {
                    idPerfil:obj.rows[i]['idPerfil'],
                    idDepartamento:obj.rows[i]['idDepartamento']
                };
                var p = new grid.store.recordType(defaultData);
              grid.store.add(p);
            }
            grid.getSelectionModel().selectRow(0);
      }

        var h_obtener_success2 = function(obj){
            

             var grid = X.get('editConfigGrid');
             var str = null;
             var len= grid.store.getCount();

            grid.stopEditing();
            for ( var i=len; i<(obj.rows.length+len); i++){
             
                var defaultData2 = {
                    idPerfil:obj.rows[i-len]['idPerfil'],
                    idDepartamento:str
                };
           
                var p = new grid.store.recordType(defaultData2);
              grid.store.add(p);

      }
           grid.getSelectionModel().selectRow(0);
//
        }
        // HANDLE CONFIRM
        var h_confirmar = function(row){
            X.ajax({
                url     : '/usuario/ajax-eliminar',
                params  : {
                    idUsuario : row.get('idUsuario')
                    },
                afterSuccess : function (){
                    X.reload('listGrid');
                }
            });
        }
        // HANDLE ACTION
        var h_editar = function(row){
            X.set('editCodigoUsuario', row.get('idUsuario'));
            X.set('editNombre',   row.get('nombre'));
            X.set('editUsername', row.get('username'));
            X.set('editApellido', row.get('apellido'));
            X.set('editEmail', row.get('email'));
            X.set('editDocumento', row.get('cedula'));
            X.set('editTelefono', row.get('telefono'));
            X.set('editCargo', row.get('cargo'));
            X.set('editPassword', '');
            X.set('editConfirmar','');
            X.set('editSexo',row.get('sexo'));
            var grid = X.get('editConfigGrid');
            var store = X.get('editStoreConfig');
            var rowCount = store.getCount();
            for(var c=0;c<rowCount;c++){
                grid.store.removeAt(0);
            }
            X.ajax({
                url: '/usuario/ajax-departamentos',
                params: {
                    idUsuario : row.get('idUsuario')
                },
                afterSuccess: h_obtener_success
            });
            X.ajax({
                url: '/usuario/ajax-perfiles',
                params: {
                    idUsuario : row.get('idUsuario')
                },
                afterSuccess: h_obtener_success2
            });
            X.set('editModificar', false);
            X.get('editPassword').disable();
            X.get('editConfirmar').disable();
            X.reload('editConfigGrid');
            X.get('editWindow').begin();
    
            
        }
        
        var h_eliminar = function(row){
            X.msg.confirm('Está seguro de eliminar el usuario "'+row.get('username')+'"?',
                X.call(h_confirmar, row));
        }

        // STORE
        X.store({
            id     : 'listStore',
            url    : '/usuario/ajax-listar',
            fields : [
            'idUsuario',
            'nombre',
            'username',
            'apellido',
            'cargo',
            'telefono',
            'cedula',            
            'email',
            'sexo'
            ]
        });

        // GRID
        X.grid.panel({
            id       : 'listGrid',
            title    : 'Lista de Usuarios',
            renderTo : 'layout_content',
            height   : 526,
            width    : 935,
            storeId    : 'listStore',
            tbar : new Ext.Toolbar({
                items:[
                X.form.button({
                    text:'Crear Usuario',
                    id:'listCrear',
                    icon:'/img/icon_agregar.png'
                }),

                {
                    xtype: 'tbseparator',
                    id:'listEspacio'
                }
                ]
            }),
            columns:[
            X.grid.text  ({
                header: 'Nombre',
                dataIndex: 'nombre',
                width: 110
            }),
            X.grid.text  ({
                header: 'Apellido',
                dataIndex: 'apellido',
                width: 110
            }),
            X.grid.text  ({
                header: 'Usuario',
                dataIndex: 'username',
                width: 110
            }),
            X.grid.text  ({
                header: 'Telefono',
                dataIndex: 'telefono',
                width: 110
            }),
            X.grid.text  ({
                header: 'Documento',
                dataIndex: 'cedula',
                width: 110
            }),
            X.grid.text  ({
                header: 'Cargo',
                dataIndex: 'cargo',
                width: 110
            }),
            X.grid.text  ({
                header: 'Email',
                dataIndex: 'email',
                width: 110
            }),
            X.grid.text  ({
                id:'sexo',
                header: 'Sexo',
                dataIndex: 'sexo',
                width: 90 ,
                renderer: columnrender
            }),
            X.grid.edit  ({
                handler : h_editar
            }),
            X.grid.remove({
                handler : h_eliminar
            })
            ],
            bbar : X.grid.paging({
                pageSize : 20,
                storeId  : 'listStore'
            })
        });

        // EVENT
        X.event.button('listCrear', function(){
            X.get('creaWindow').begin();
        });
   

X.win.panel({
        id       : 'listWindow',
        //title    : 'Carga de horario',
        modal    : false,
        resizable: false,
        border: false,
        items    : X.get('listGrid')
    });

    X.get('listWindow').show();

});